<clr-modal [(clrModalOpen)]="opened">
    <h3 class="modal-title">{{'APP_ADD'|translate}}{{'APP_LICENSE'|translate}}</h3>
    <div class="modal-body modal-height">
        <form clrForm #itemForm="ngForm" enctype="multipart/form-data">
            <div style="display: inline-flex;">
                <clr-input-container class="clr-control-container clr-col-md-9">
                    <label class="clr-col-md-4">{{"APP_FILE"|translate}}</label>
                    <input class="clr-col-md-8" clrInput name="name"  placeholder="{{this.file?.name || 'APP_FILE_SELECTED_NOTHING' | translate}}" disabled/>
                </clr-input-container>
                <div style="margin-top: 1.2rem;" class="clr-col-md-3">
                    <label style="margin-left: 15px;" for="chart" class="btn btn-secondary btn-sm file-browser-btn">{{"APP_FILE_SELECT"|translate}}</label>
                    <input style="display: none;" class="file-input" type="file" id="chart" name="chart" ngModel (change)="upload($event)">
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" (click)="onSubmit()"
                [disabled]="itemForm.invalid || file == null">{{"APP_COMMIT"|translate}}</button>
    </div>
</clr-modal>
